<template>
  <LeftAndRight>
    <template #left-content>
      <div class="title-panel">通讯录</div>
      <div class="menu-list">
        <div
          :class="['menu-item', route.path == item.path ? 'menu-active' : '']"
          v-for="item in contactMenuList"
          @click="jump(item)"
        >
          <div
            :class="['iconfont', item.icon]"
            :style="{ background: item.bgColor }"
          ></div>
          <div class="menu-name">{{ item.name }}</div>
          <div v-if="item.path === '/contact/newFriend'">
            <Badge
              :count="messageCountStore.getCount('contactApplyCount')"
              :top="225"
              :left="340"
            ></Badge>
          </div>
        </div>
      </div>
    </template>
    <template #right-content>
      <div class="right-title-panel">{{ name }}</div>
      <router-view v-slot="{ Component }">
        <component :is="Component" ref="componentRef" />
      </router-view>
    </template>
  </LeftAndRight>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useMessageCountStore } from "@/stores/MessageCountStore";
import { openIndexedDB, getDataByKey, updateDB } from "@/utils/IndexedDB";

const router = useRouter();
const route = useRoute();
const messageCountStore = useMessageCountStore();

const contactMenuList = ref([
  {
    name: "搜索好友",
    icon: "icon-f-customer_query",
    path: "/contact/searchFriend",
    bgColor: "#fa9d3b",
  },
  {
    name: "搜索群组",
    icon: "icon-LookupGroupMembers",
    path: "/contact/searchGroup",
    bgColor: "#fa9d3b",
  },
  {
    name: "申请列表",
    icon: "icon-xindepengyou",
    path: "/contact/newFriend",
    bgColor: "#08bf61",
  },
  {
    name: "新建群组",
    icon: "icon-xinjianqunzu",
    path: "/contact/createGroup",
    bgColor: "#08bfff",
  },
  {
    name: "我的群组",
    icon: "icon-wodequnzu",
    path: "/contact/myGroup",
    bgColor: "#1485ee",
  },
  {
    name: "公开群组",
    icon: "icon-wodequnzu",
    path: "/contact/joinGroup",
    bgColor: "#1294f5",
  },
  {
    name: "我的好友",
    icon: "icon-iconfontwodehaoyou",
    path: "/contact/myFriend",
    bgColor: "#023ddd",
  },
]);

const name = ref("搜索好友");
const jump = async (data) => {
  if (data.path == "/contact/newFriend") {
    messageCountStore.setCount("contactApplyCount", 0, true);
    let chatDbUser = await openIndexedDB(
      "chat" + JSON.parse(localStorage.getItem("userInfo")).userId
    );
    const currentUserId = JSON.parse(localStorage.getItem("userInfo")).userId;
    const existCurrentUser = await getDataByKey(chatDbUser, "user", currentUserId);
    if (existCurrentUser) {
      let updateCurrentUser = {
        userId: currentUserId,
        contactNoRead: 0,
      };
      await updateDB(chatDbUser, "user", updateCurrentUser);
    }
  }
  name.value = data.name;
  router.push(data.path);
};
</script>

<style lang="scss" scoped>
.title-panel {
  height: 60px;
  background: #f7f7f7;
  text-align: center;
  line-height: 60px;
  font-weight: 600;
  font-size: 13px;
}

.right-title-panel {
  height: 60px;
  background: #eaeaea;
  text-align: center;
  line-height: 60px;
  font-weight: 600;
  font-size: 13px;
}

.menu-list {
  border-top: 1px solid #ddd;

  .menu-item {
    display: flex;
    align-items: center;
    padding: 10px;

    &:hover {
      cursor: pointer;
      background: #c9c8c6;
    }

    .iconfont {
      font-size: 20px;
      width: 35px;
      height: 35px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .menu-name {
      font-weight: 600;
      font-size: 13px;
      color: #000000;
      margin-left: 10px;
      flex: 1;
    }
  }

  .menu-active {
    background: #c4c4c4;

    &:hover {
      background: #c4c4c4;
    }
  }
}
</style>
